<!-- 基地详情 -->
<template>
	<view style="padding-bottom:100rpx;">
		<page-head :title="'详情'" :headtype="2"></page-head>
		<view class="banner marginAuto" style="margin-top:5rpx;">
			<uv-swiper class="banner" height="192" :list="bannerdata" keyName="image"></uv-swiper>
		</view>
		<view class="jdmsg marginAuto">
			<view class="jdmsgtitle ellipsis01">{{ datas.name }}</view>
			<view class="jdmsgbm">{{ datas.num || 0 }}人报名</view>
			<view class="jdmsgsite flex" @click="openmap()">
				<view class="jbmsgsitetxt ellipsis01">{{ datas.address }}</view>
				<view class="jbmsgsitejl flex" style="margin-top:2rpx;">
					<uv-icon name="map" color="#0C6BF7" size="14"></uv-icon>
					<text class="mainColor" style="font-size:20rpx;margin-left:5rpx;">{{ datas.distance }}</text>
				</view>
			</view>
		</view>
		<view class="jdclassify" :style="'top:'+statusheadheight+'px'">
			<view class="tagnavmain marginAuto">
				<view class="naveach"
				 v-for="(item,index) in typedata" :key="index"
				@click="navfun(item.type)"
				:class="typenavac == item.type ? 'navactive':''">{{ item.type }}
					<view class="naveachx"></view>
				</view>
			</view>
		</view>
		<view class="jdlist">
			<view class="jditem marginAuto flex" v-for="(item,index) in jdlist" :key="index">
				<view class="jditemse flex" :class="item.ac ? 'mainBg':''" @click="acfun(item,index)">
					<uv-icon class="marginAuto" name="checkmark" size="18" color="#ffffff"></uv-icon>
				</view>
				<view class="jditemimg" @click="acfun(item,index)">
					<image :src="apifun.URLimg+item.img" mode="aspectFill"></image>
				</view>
				<view class="jditemmsg" @click="apifun.navigate('/pages/learn/subjectxq','kcid='+item.id)">
					<view class="jditemmsgname ellipsis01">{{ item.name }}</view>
					<view class="jditemmsgmoney flex">
						<view class="jditemmsgmoneynum">￥{{ item.price }}</view>
						<view class="jditemmsgmoneyjian">已减{{ parseFloat(item.old_price-item.price).toFixed(2) }}</view>
					</view>
					<view class="jditemmsgy">￥{{ item.old_price }}</view>
				</view>
			</view>
		</view>
		<view class="signup">
			<view class="signupmain flex marginAuto">
				<view class="signupphone" @click="callphone()">
					<view class="signupphoneicon">
						<uv-icon name="phone" size="20" color="#0089FB"></uv-icon>
					</view>
					<view class="signupphonetxt mainColor">电话</view>
				</view>
				<view class="signupbtn baiColor mainBg" @click="applyfun()">报名</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				id:'',
				datas:{},
				bannerdata:[],
				typenavac:'',
				typedata:[],
				jdlist:[]
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.jddatafun();
		},
		methods: {
			openmap(){
				uni.openLocation({
					longitude: Number(this.datas.lng),
					latitude:Number(this.datas.lat),
					name: this.datas.name,
					address: this.datas.address
				})
			},
			applyfun(){
				let acid = {};
				this.jdlist.forEach((item,index)=>{
					if(item.ac){
						acid=item
					}
				});
				if(acid.id){
					this.apifun.navigate('/pages/learn/signup','kcid='+acid.id)
				}else{
					this.apifun.toast('请选择您要报名的课程')
				}
			},
			jddatafun(){  // 详情
				let sendData = {
					lng:uni.getStorageSync('lng') || this.apifun.lng,
					lat:uni.getStorageSync('lat') || this.apifun.lat,
					school_id:this.id
				}
				this.apifun.unirequest('/api/study/getSchoolDetail','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						this.bannerdata = [{"image":this.apifun.URLimg+datas.img}];
						this.typedata = datas.type_list;
						if(datas.type_list.length <= 0){
							this.typenavac = []
						}else{
							this.typenavac = datas.type_list[0].type;
							this.courseListfun();
						}
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			courseListfun(){
				let sendData = {
					school_id:this.id,
					type:this.typenavac
				}
				this.apifun.unirequest('/api/study/getCourseList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.jdlist = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			callphone(){  // 拨打电话
				uni.showActionSheet({
					itemList:this.datas.tel,
					success:(res)=>{
						uni.makePhoneCall({
							phoneNumber: this.datas.tel[res.tapIndex]
						});
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			acfun(items,indexs){
				this.jdlist.forEach((item,index)=>{
					this.$set(item,'ac',false)
				});
				this.$set(items,'ac',true)
			},
			navfun(type){
				this.typenavac = type;
				this.courseListfun();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.jdlist = [];
			this.jddatafun();
			uni.stopPullDownRefresh();
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.jddatafun()
		// },
	};
</script>

<style scoped lang="scss">
	.banner{
		position: relative;
		z-index: 10;
		width:100%;
		height: 400rpx;
	}
	.jdmsg{
		width: 650rpx;
		padding: 20rpx;
		background:#ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.jdmsgtitle{
			font-size:34rpx;
			color: #222222;
			line-height: 50rpx;
		}
		.jdmsgbm{
			display:inline-block;
			padding: 0 20rpx;
			line-height:40rpx;
			font-size:24rpx;
			color: #0089FB;
			background:#E7F2FF;
			border-radius: 4rpx;
			margin: 10rpx 0;
		}
		.jdmsgsite{
			padding: 5rpx 0 0;
			.jbmsgsitetxt{
				width: 80%;
				font-size: 24rpx;
				color: #666666;
				line-height: 40rpx;
			}
			.jbmsgsitejl{
				margin-left: 20rpx;
				line-height: 40rpx;
			}
		}
	}
	// nav导航
	.jdclassify{
		position:sticky;
		z-index: 10;
		width: 100%;
		padding:16rpx 0rpx 24rpx;
		background: #fff;
		margin-top: 10rpx;
		.tagnavmain{
			width:85%;
			display: flex;
			justify-content:space-around;
			.naveach {
				position: relative;
				color:#333333;
				font-size:30rpx;
				text-align: center;
				font-weight: 600;
				.naveachx {
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					background: #fff;
					width: 50rpx;
					margin-left: -25rpx;
					height: 4rpx;
					border-radius: 100rpx;
					transition: background .5s;
				}
			}
			.navactive {
				color:#0089FB;
				
				.naveachx {
					background:linear-gradient(to left,#B7EDFF,#0089FB);
				}
			}
		}
	}
	// 列表
	.jditem{
		width: 650rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.jditemse{
			width: 40rpx;
			height: 40rpx;
			border-radius:50%;
			margin-right: 20rpx;
			margin-top:55rpx;
			border: 1px solid #EEEEEE;
		}
		.jditemimg{
			width: 140rpx;
			height: 140rpx;
			image{
				width: 140rpx;
				height: 140rpx;
				border-radius:10rpx;
			}
		}
		.jditemmsg{
			width:67%;
			margin-left: 20rpx;
			.jditemmsgname{
				font-size: 30rpx;
				color: #333333;
				line-height: 50rpx;
			}
			.jditemmsgmoney{
				padding: 10rpx 0;
				.jditemmsgmoneynum{
					font-size: 30rpx;
					color: #FC2A2A;
					margin-right: 20rpx;
				}
				.jditemmsgmoneyjian{
					display:inline-block;
					padding: 0 20rpx;
					line-height:40rpx;
					font-size:24rpx;
					color:#FC2A2A;
					background:#FFF0F0;
					border-radius: 4rpx;
				}
			}
			.jditemmsgy{
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
			}
		}
	}
	// 底部按钮
	.signup{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		.signupmain{
			width: 90%;
			justify-content: space-between;
			margin-top: 10rpx;
			.signupphone{
				position: relative;
				width: 18%;
				.signupphoneicon{
					position: absolute;
					left: 50%;
					height:40rpx;
					margin-left: -25rpx;
				}
				.signupphonetxt{
					margin-top:40rpx;
					text-align: center;
					font-size:24rpx;
				}
			}
			.signupbtn{
				border-radius: 100rpx;
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size:36rpx;
			}
		}
	}
</style>